<template>
  <Modal v-model="showModal" title="微信客户详情" :footer-hide="true">
    <div class="detals">
      <p>
        <label>创建时间：</label><span>{{info.createTime||'-'}}</span>
      </p>
      <p>
        <label>客户姓名：</label><span>{{info.customerName||'-'}}</span>
      </p>
      <p>
        <label>归属顾问：</label><span>{{info.userName? `${info.userName}(${info.workNo})`:'-'}}</span>
      </p>
      <p>
        <label>微信号：</label><span>{{info.wechat||'-'}} <img v-if="info.wechatPhoto"
            :src="info.wechatPhoto" style="display:inline-block;width:50px;height:50px;"
            @click="lookImg1"></span>
      </p>
      <p>
        <label>手机号：</label><span>{{info.customerPhone||'-'}}</span>
      </p>
      <p>
        <label>意向等级：</label><span>{{info.intentionLevel||'-'}}</span>
      </p>
      <p>
        <label>客户特征：</label><span
          style="word-break: break-all">{{info.customerFeature||'-'}}</span>
      </p>
      <p>
        <label>特征附件：</label><span><img v-if="imgF" @click='lookImg' :src='imgF'><span
            v-if="infoLenFlag"> 等{{info.featurePhoto.length}}个</span> <em v-else>-</em>
        </span>
      </p>
      <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage">
      </preview-image>
    </div>
  </Modal>
</template>

<script>
  // import detailOpt from '../opt/audit.js'
  export default {
    data() {
      return {
        info: {},
        showModal: false,
        showIndex: 0,
        preViewImg: [],
        imgF: '',
        infoLenFlag: false
      }
    },
    methods: {
      lookImg() {
        this.preViewImg = this.info.featurePhoto
        this.$refs.preViewImage.show()
      },
      lookImg1() {
        this.preViewImg = [this.info.wechatPhoto]
        this.$refs.preViewImage.show()
      },

      show(info) {
        this.showModal = true
        this.info = info
        this.infoLenFlag = this.info.featurePhoto && this.info.featurePhoto.length > 1

        this.imgF = this.info.featurePhoto[0] ? this.info.featurePhoto[0] : ''
        // this.$refs.info.show(detailOpt.options(this), this.info)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .detals {
    p {
      margin-bottom: 15px;

      img {
        width: 50px;
        height: 50px;
        cursor: pointer;
        display: inline-block;
        vertical-align: -30px;
      }

      em {
        font-style: normal;
      }
    }
  }
</style>